@page "/circular-gauge/compass"


@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates how to make a direction compass by using the features in gauge. Color of the needle and direction labels can be customized by using options in the property panel.</p>
</SampleDescription>
<ActionDescription>
   <p> The circular gauge can be customized as per the user requirement. In this example, a direction compass has been depicted by adding needle tail to the pointer of the circular gauge and by customizing the labels to show the direction. </p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
	<SfCircularGauge>
		<CircularGaugeEvents AxisLabelRendering="AxisLabelChange"/>
		<CircularGaugeAxes>
			<CircularGaugeAxis Radius="70%" StartAngle="0" EndAngle="360" Minimum="0" Maximum="8">
				<CircularGaugeAxisLabelStyle AutoAngle="true" HiddenLabel="HiddenLabel.Last" Offset="10">
					<CircularGaugeAxisLabelFont FontFamily="Roboto" Size="12px" Color="@GaugeLabelColor"/>
				</CircularGaugeAxisLabelStyle>
				<CircularGaugeRanges>
					<CircularGaugeRange Color="@GaugeLabelColor" Start="7" End="7"/>
				</CircularGaugeRanges>
				<CircularGaugeAxisLineStyle Width="10" Color="#E0E0E0"/>
				<CircularGaugeAxisMajorTicks Height="15" Interval="1"/>
				<CircularGaugeAxisMinorTicks Height="10" Interval="0.5"/>
				<CircularGaugePointers>
					<CircularGaugePointer Value="7" Radius="50%" Color="@GaugePointerColor" PointerWidth="20">
						<CircularGaugeCap Radius="0">
							<CircularGaugeCapBorder Width="0"/>
						</CircularGaugeCap>
					</CircularGaugePointer>
					<CircularGaugePointer Value="3" Radius="50%" Color="#9E9E9E" PointerWidth="20">
						<CircularGaugeCap Radius="0">
							<CircularGaugeCapBorder Width="0"/>
						</CircularGaugeCap>
					</CircularGaugePointer>
				</CircularGaugePointers>
			</CircularGaugeAxis>
		</CircularGaugeAxes>
	</SfCircularGauge>
</div>
<div class="col-md-3 property-section">
	<div class="property-panel-section">
		<div class="property-panel-header">Properties</div>
		<div class="property-panel-content">
			<table style="width: 100%">
				<tr>
                    <td>
						<div>Pointer Color</div>
					</td>
					<td>
                        <div style="margin-left: -10px">
							<SfDropDownList  DataSource="@PointerColorData" @bind-Value="@PointerColorValue">
                                <DropDownListEvents TItem="PointerColor" TValue="string" ValueChange="@PointerColorChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Name"/>
							</SfDropDownList>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div>Label Color</div>
					</td>
					<td>
                        <div style="margin-left: -10px">
                            <SfDropDownList DataSource="@LabelColorData" @bind-Value="@LabelColorValue">
                                <DropDownListEvents TItem="LabelColor" TValue="string" ValueChange="@LabelColorChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Name"/>
                            </SfDropDownList>
						</div>
					</td>
				</tr>
			</table>
		</div>
		</div>
	</div>
<style>
	tr{
		height:50px;
	}
	td {
		width:50%;
	}
</style> 
@code{
	public string[] Values = {"N", "NE", "E", "SE", "S", "SW", "W", "NW", " " };
	private string PointerColorValue = "#f03e3e";
	private string LabelColorValue = "#f03e3e";
	private string GaugePointerColor = "#f03e3e";
	private string GaugeLabelColor = "#f03e3e";
	public class PointerColor {
		public string Name { get; set; }
	}
	public List<PointerColor> PointerColorData = new List<PointerColor>	{
		new PointerColor{ Name = "#f03e3e"},
		new PointerColor{ Name = "#4472c4"},
		new PointerColor{ Name = "#ed7d31"},
	};
	public class LabelColor {
		public string Name { get; set; }
	}
	public List<LabelColor> LabelColorData = new List<LabelColor> {
		new LabelColor{ Name = "#f03e3e"},
		new LabelColor{ Name = "#4472c4"},
		new LabelColor{ Name = "#ed7d31"},
	};
	private void PointerColorChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, PointerColor> args) {
		PointerColorValue = (args.Value).ToString();
		GaugePointerColor = PointerColorValue;
	}
	private void LabelColorChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, LabelColor> args)	{
		LabelColorValue = (args.Value).ToString();
		GaugeLabelColor = LabelColorValue;
	}
	private void AxisLabelChange(Syncfusion.Blazor.CircularGauge.AxisLabelRenderEventArgs args) {
        args.Text = Values[Convert.ToInt32(args.Value)];
    }
} 
